<template>
<card class="create-user-con">
        <p slot="title">新建客户</p>
        <span slot="extra" @click.prevent="close($event)">
            <Icon type="close-round" color="#495060"></Icon>
        </span>
        <Form inline :rules="ruleValidate">
            <Row>
                <Col span="8">
                    <FormItem label="来电手机号" prop="telephone" :label-width="120">
                        <Input :value="'15811532867'" readonly></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="用户姓名" prop="username"  :label-width="120">
                        <Input></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别" prop="sex" :label-width="120">  
                        <Select  style="width:100px">
                            <Option v-for="item in sexGroup" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <FormItem label="学生姓名" :label-width="120">
                        <Input></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年龄" :label-width="120">
                        <Input></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="渠道信息" :label-width="120">
                        <Input></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem label="购买周期" :label-width="120">
                        <Select  style="width:150px">
                            <Option v-for="item in buyCycleGroup" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
        </Row>
        <Row type="flex" justify="end">
                <Col span="24" style="display:flex;justify-content:flex-end;">
                    <Button type="primary">保存</Button>
                </Col>
            </Row>
        </Form>
</card>
</template>

<style scoped>
    .create-user-con {
        width: 800px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -400px;
        margin-top: -155px;
        z-index: 200;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
    
    .line {
        width: 100%;
        height: 1px;
        border-top: solid 1px #eaeaea;
        margin: 10px 0 10px 0;
    }
</style>
<script>
    export default {
        name: 'taskActionForm',
        data() {
            return {
                sexGroup: ['男', '女'],
                buyCycleGroup: [],
                ruleValidate: {
                    username: [{
                        required: true,
                        message: '请填写用户名！',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别！',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            close() {
                let node = event.target.parentNode.parentNode.parentNode
                document.body.removeChild(node)

            }
        }
    }
</script>